<template>
	<section class="todoapp">
		<TodoHeader :arr="list" @add="addFn"></TodoHeader>
		<TodoMain :arr="newList" @del="delFn"></TodoMain>
		<TodoFooter :arr="list" @clear="clearFn" @change="changeFn"></TodoFooter>
	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'
	import './styles/base.css'
	import './styles/index.css'
	export default {
		components:{
				TodoHeader,
				TodoMain,
				TodoFooter
			},
		data() {
			return {
				type:'',
				list: [{
						id: 100,
						name: "吃饭",
						isDone: true
					},
					{
						id: 201,
						name: "睡觉",
						isDone: false
					},
					{
						id: 103,
						name: "打豆豆",
						isDone: true
					},
				],
			};
		},
		methods:{
			delFn(id){
				return this.list = this.list.filter(item => item.id !== id)
			},
			addFn(name){
				let id = new Date()
				this.list.unshift({
					id,
					name,
					isDone:false
				})
			},
			clearFn(){
				return this.list = this.list.filter(item => !item.isDone)
			},
			changeFn(type){
				this.type = type
			}
		},
		computed:{
			newList(){
				if(this.type === 'active'){
					return this.list.filter(item => !item.isDone)
				}else if(this.type === 'complete'){
					return this.list.filter(item => item.isDone)
				}else{
					return this.list
				}
			}
		}
	};
</script>
